<template>
  <div class="face">
    <div class="face-form">
      <fc-wf
          color="#9cdbd8"
          dur=4
      >
        <img src="../assets/login.png" alt="">
      </fc-wf>
    </div>
    <div class="face-input">
      <div class="face-input">
        <fc-input
          placeholder="请输入用户名"
          type="text"
          @input="inname"
        ></fc-input>
        <fc-input
          placeholder="请输入密码"
          type="password"
          @input="inpass"
        ></fc-input>
      </div>
    </div>
    <div class="face-but">
      <vs-checkbox color="#32d2e1" v-model="reme">
        记住我
      </vs-checkbox>
      <fc-bubb click>
        <fc-arr-btn @click="register">注册</fc-arr-btn>
      </fc-bubb>
      <fc-bubb click>
        <fc-pa-btn @click="login">登录</fc-pa-btn>
      </fc-bubb>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  props: {
    msg: String
  },
  data(){
    return{
      user:{
        name:'',
        passwd:'',
      },
      reme:false,


    }
  },
  methods:{
    // 获取用户名和密码
    inname(e){
      this.user.name = e.target.value;
    },
    inpass(e){
      this.user.passwd = e.target.value;
    },
    // 跳转到注册
    register(){
       this.$router.push({path:'/register'})
    },
    // 登录
    async login(){
      if(this.user.name === '' || this.user.passwd === ''){
        this.$vs.notification({
          position:'top-center',
          icon:'<span class="material-icons">error</span>',
          color:'warn',
          title: '错误',
          text: '用户名和密码不能为空'
        })
        return false
      }
      // 登录接口
      var result = await this.$proxy.login(this.user);
      // console.log(result)
      if(result.code === 1){
        //存入token
        localStorage.setItem('token',result.data['token']);
        // alert(localStorage.token);
        const loading = this.$vs.loading({
          type:'circles',
          color:'#d5397b',
          text: '欢迎您'+result.data['name'],
        })
        this.hasOpenLoading = true
        setTimeout(() => {
          loading.close()
          this.hasOpenLoading = false
        }, 2000)
        this.$router.push('/');
      }else{
        this.$vs.notification({
          position:'top-center',
          icon:'<span class="material-icons">error</span>',
          color:'warn',
          title: '错误',
          text: result.msg
        })
      }
    }

  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.face .face-form{
  border-radius: 2px 2px 10px 10px;
  box-shadow: 2px 2px 20px #40bab3;
}
.face .face-form fc-wf {
  margin: 0 auto;
}
.face .face-input{
  display: flex;

  margin-top: 2%;
  justify-content: center;
}
.face .face-input fc-input{
  margin: 1rem;
  --width:18rem;
  --color:#41b883;
  --placeholder-color:#35495e;
  --circle-color:#32df72;
}
.face .face-but{
  display: flex;
  padding: 5% 15%;
  justify-content: space-around;
}
</style>
